<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title> 车友会-单独相册页 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="lijun_gz liuwencong_gz" />
<link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/cyh.css">
</head>

<body class="g-doc">
<!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7637" />
        </jsp:include>
<div class="body">
<!-- 公共头部 -->
<%@include file="../common/intf6007.html" %>
    <div class="g-hd">
        <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
        <div class="header-title">
            <span class="header-title-nav">
                <a href="${WAPROOT}/">车友会</a> > <a href="${WAPROOT}/${club.clubUrl}/"> ${fn:length(fn:escapeXml(club.name))>8?fn:substring(fn:escapeXml(club.name),0,8):fn:escapeXml(club.name)}${fn:length(fn:escapeXml(club.name))>8?"...":""}</a> > 相册
            </span>
        </div>
    </div>
    <div class="m-section">
        <span class="m-section-mark">${fn:escapeXml(requestScope.album.name)}</span>
    </div>
    <div class="m-piclist" id="photoList"><!-- 每个a直接请保留空格或者换行 -->
        <c:forEach items="${requestScope.pager.resultList}" var="data">
        <a href="${WAPROOT}/${club.clubUrl}/album/a${album.albumId}-${data.photoId}-show"><img src="${data.url160x120}"/></a>
        </c:forEach>
    </div>
    <c:if test="${requestScope.isMore}">
        <div class="moreline" onclick="loadMore();" id="loadMore"><a href="javascript:void(0);">点击加载更多</a></div>
    </c:if>
<div class="g-footer">
<!-- 公共底部 -->
  <%@include file="../common/intf5987.html" %>
</div>
<script type="text/javascript" src="http://js.3conline.com/wap/2013/common/js/zepto1.1.min.js" ></script>
<script type="text/javascript">
/*满屏功能*/
function setHeight(){//每次加载更多后请执行这个函数
    var Jfoot = document.querySelector(".g-footer"),
        Jbody = document.querySelector(".body");
    if (!Jfoot || !Jbody){return;}
    var webHeight = document.documentElement.clientHeight,
        JbodyHeight = Jbody.clientHeight;
    if (JbodyHeight < webHeight) {
        Jbody.style.height = webHeight + "px";
        Jbody.style.position = "relative";
        Jfoot.setAttribute("style", "width:100%;position:absolute;bottom:0px;");
    }else{
        Jfoot.style.position = "relative";
    }
}
window.onload = function(){
    setHeight();
}
var pageNo = 2;
var pageSize = 6;
var photoHtml = "<a href=\"${WAPROOT}{detailUrl}\"><img src=\"{photoUrl}\"/></a> ";
function photoCallback(data){
    if(data.code==0){
        var result = data.data;
        var html="";
        for(var i = 0;i<result.length;i++){
            var d = result[i];
            html+=photoHtml.replace(/{photoUrl}/ig,d.urlsmall).replace(/{detailUrl}/ig,"/${club.clubUrl}/album/a"+data.albumId+"-"+d.photoId+"-show/");
        }
        $("#photoList").append(html);
        setHeight();
        pageNo = data.pageNo;
        if(pageNo >= data.pageCount){
            $("#loadMore").hide();
        }
    }
}
function pagerLoadPhoto(lpageNo){
    $.getJSON("${ROOT}/album/getPhotoByAlbumId.do?req_enc=utf-8&resp_enc=utf-8&callback=?",{albumId:${album.albumId},pageNo:lpageNo,pageSize:pageSize},photoCallback);
}
function loadMore(){
    pagerLoadPhoto(pageNo+1);
}
</script>
</div>
</body>
</html>